<template>
    <ul class="order">
        <li>
            <div class="order-info">
                <p style="margin-bottom: 0;margin-top: 0">
                    {{orderInfoDetails.shopName}}
                    <font-awesome-icon @click="isDisplay=!isDisplay" :icon="['fas', 'caret-down']" style="margin-left: 1vw;" />
                </p>
                <div v-if="!isPaymentPage && isNeedPaied" class="order-info-right">
                    <p>&#165;{{orderInfoDetails.orderTotal }}</p>
                    <div class="order-info-right-icon" @click="navigatorToPay(orderInfoDetails.id)">去支付</div>
                    <div class="order-info-right-icon" style="background-color: #e74f4f" @click="cancelOrder(orderInfoDetails.id)">取消</div>
                </div>
                <div v-else class="order-info-right">
                    <p style="color: red">&#165;{{orderInfoDetails.orderTotal}}</p>
                    <div v-if="orderInfoDetails.orderState === 1" class="order-info-right-icon" style="background-color: #38CA73;" >已支付</div>
                    <div v-else-if="orderInfoDetails.orderState === 2" class="order-info-right-icon" style="background-color: #38CA73;" >已确认</div>
                    <div v-else-if="orderInfoDetails.orderState === 3" class="order-info-right-icon" style="background-color: rgb(144,147,153)" >已退款</div>
                </div>
            </div>
            <ul class="order-detailet" :style="isDisplay?'display: block':'display: none'">
                <template v-for="item in orderDetailetList">
                    <li>
                        <p>{{item.itemName}} x {{item.quantity}}</p>
                        <p>&#165;{{item.quantity*item.shopShopItemPrice}}</p>
                    </li>
                </template>
            </ul>
        </li>
    </ul>
</template>

<script setup>
import {ref, defineProps, toRefs, watch} from 'vue'
import router from "../route/route.js";
import {deleteOrderAPI} from "../api/api.js";
import {getSessionStorage} from "../common.js";
const isDisplay = ref(false)
const {token,userPhone} = getSessionStorage("user")
const props = defineProps(['isPaymentPage','orderInfo','isNeedPaied'])
const emit = defineEmits(["deleteOrder"])
const {orderInfo} = toRefs(props)
const isPaymentPage = props.isPaymentPage //是否为支付页面
const isNeedPaied = props.isNeedPaied  //是否已完成支付

const orderInfoDetails = ref({})

const orderDetailetList = ref([])

watch(orderInfo,(value)=>{
    orderInfoDetails.value = value
    orderDetailetList.value.splice(0,orderDetailetList.value.length)
    orderDetailetList.value.push(...orderInfoDetails.value.lineItemDTOS)
},{immediate:!isPaymentPage})
const navigatorToPay = (orderId)=>{
    router.push({path:`/payment/${orderId}`})
}

const cancelOrder = async (orderId)=>{
    await deleteOrderAPI(token,orderId).then(res=>{
        if (res.data.data){
            alert("取消成功")
            router.replace({path:'/customerindex'})
        }else {
            alert("取消失败")
        }
    })
}

</script>

<style scoped>
/****************** 历史订单列表部分 ******************/

.order{
    margin: 0;
    width: 100%;
}
.order li{
    width: 100%;
}
.order li .order-info{
    box-sizing: border-box;
    padding: 2vw 4vw;
    font-size: 4vw;
    color: #666;

    display: flex;
    justify-content: space-between;
    align-items: center;

    height: 8.5vw;
}
.order li .order-info .order-info-right{
    display: flex;
    justify-content: center;
    align-items: center;
}
.order li .order-info .order-info-right .order-info-right-icon{
    background-color: #f90;
    color: #fff;
    border-radius: 3px;
    margin-left: 2vw;
    user-select: none;
    cursor: pointer;
    height: 5.5vw;
}
.order li .order-detailet{
    width: 100%;
}
.order li .order-detailet li{
    width: 100%;
    box-sizing: border-box;
    padding: 1vw 4vw;
    color: #666;
    font-size: 3vw;

    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>